<template>
	<view class="topContains">
		<view class="bg-white">
			<view class="d-flex align-center justify-space-between pa-3">
				<view @click="isCurrent=item.id" :class="isCurrent==item.id?'active-line':'ischeckFalse'"
					class="text-center line" v-for="(item,index) in listDeliver" :key="index">
					<view class="text-14">
						{{item.name}}
					</view>
					<view class="text-13">
						{{item.title}}
					</view>
					<text v-if="isCurrent==item.id" class="iconfont icon-duihao-xuanzhong font-20 color-primary"></text>
				</view>
			</view>
			<!-- 上传照片 -->
			<view class="bg-f2 my-2 px-3 py-3 font-14 color000 font-bold">
				上传照片/视频
			</view>
			<view class="bg-title px-3 pb-3">
				<view class="font-14 color000 font-bold">
					<text>货物外包装照片/视频</text>
					<text class="colorb2 font-weight-500 mx-2">(2-6个)</text>
				</view>
				<template>
					<view class="image-counter">
						<view class="items-img">
							<u--image radius='8'
								src="https://img1.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427"
								width="60px" height="60px"></u--image>
							<view class="close-icon" @click="handleDeleteImage(index)">
								<u-icon name="close-circle-fill" size="22" color="#000"></u-icon>
							</view>
						</view>
						<view class="text-center pa-2 bg-f2 rounded-5 width-60">
							<text class="iconfont icon-shangchuanzhaopian colorb2 font-20 bor"
								@click="handleUploadImage"></text>
							<view class="font-10 mt-1 colorb2">
								上传图片
							</view>
						</view>
					</view>
				</template>
				<!-- 上传视频 -->
				<template>
					<view class="image-counter">
						<view class="items-img">
							<u--image radius='8'
								src="https://img1.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427"
								width="60px" height="60px"></u--image>
							<view class="close-icon" @click="handleDeleteImage(index)">
								<u-icon name="close-circle-fill" size="22" color="#000"></u-icon>
							</view>
						</view>
						<view class="text-center pa-2 bg-f2 rounded-5 width-60">
							<text class="iconfont icon-shangchuanshipin colorb2 font-20 bor"
								@click="handleUploadImage"></text>
							<view class="font-10 mt-1 colorb2">
								上传视频
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="bg-title px-3 pb-3">
				<view class="font-14 color000 font-bold">
					<text>物流标签</text>
					<text class="colorb2 font-weight-500 mx-2">(1-2个)</text>
				</view>
				<template>
					<view class="image-counter">
						<view class="items-img">
							<u--image radius='8'
								src="https://img1.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427"
								width="60px" height="60px"></u--image>
							<view class="close-icon" @click="handleDeleteImage(index)">
								<u-icon name="close-circle-fill" size="22" color="#000"></u-icon>
							</view>
						</view>
						<view class="text-center pa-2 bg-f2 rounded-5 width-60">
							<text class="iconfont icon-shangchuanzhaopian colorb2 font-20 bor"
								@click="handleUploadImage"></text>
							<view class="font-10 mt-1 colorb2">
								上传图片
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="font-14 text-center my-6 color666">
			提交后,即代表您同意了
			<text class="color-primary">《平台规则》</text>
		</view>
		<!-- 提交 -->
		<view class="mx-4">
			<u-button text="提交" type="primary" class="custom-style"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCurrent: null,
				listDeliver: [{
					id: 0,
					name: '提货正常',
					title: '货物外包装完好',
				}, {
					id: 1,
					name: '提货异常',
					title: '货物外包装破损',
				}, ],
				imageDataList: [],
			};
		},
		methods: {
			// 删除图片
			handleDeleteImage(index) {
				this.imageDataList.splice(index, 1);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.topContains {
		.line {
			border: 1rpx solid #999;
			padding: 20rpx 40rpx;
			border-radius: 10rpx;
			position: relative;

			.iconfont {
				position: absolute;
				top: -2rpx;
				right: 0;
			}
		}

		.active-line {
			border: 1rpx solid $u-primary;
		}

		// 上传图片
		.image-counter {
			margin-top: 20rpx;
			display: flex;
			gap: 24rpx 24rpx;
			flex-wrap: wrap;

			.items-img {
				width: 120rpx;
				height: 120rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

				.close-icon {
					position: absolute;
					right: 0px;
					top: -8px;
				}
			}
			.width-60 {
				width: 120rpx;
				height: 120rpx;
				box-sizing: border-box;
			}
		}
		.custom-style {
			border-radius: 14rpx;
		}
	}
</style>